<!--
 * @Author: hq_deveolper hz858632@163.com
 * @Date: 2024-10-02 17:05:33
 * @LastEditors: hq_deveolper hz858632@163.com
 * @LastEditTime: 2024-10-03 14:21:11
 * @FilePath: \city-screen\src\views\JieXiangChuiShao\components\ChuiShaoShiXiangTongJi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="area">
        <div class="area-top">吹哨满意度统计</div>
        <div class="area-main" id="areaMain">

        </div>
    </div>
</template>
<script>
import { streetChuiShaoDB } from '@/api/index'
import * as echarts from 'echarts';
export default {
    data() {
        return {

        }
    },
    mounted() {
        // this.loadEcharts({streetId:undefined,type:undefined})
    },
    methods: {
        async loadEcharts({ streetId = undefined, type = undefined }) {
            const res = await streetChuiShaoDB.getSatisfactionLevel({ streetId, type })
            const sum = res.data.map(item => { return Number(item.num) }).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
            let listData = res.data
            if (listData.length != 0) {
                listData.forEach(item => {
                    item.value = item.num / sum * 100
                    item.name = item.type
                })
            }
            var chartDom = document.getElementById('areaMain');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                backgroundColor: "transparent",
                color: ["#00D5FB", "#24EC89", "#FFCE53"],
                grid: {
                    left: 50,
                    top: 50,
                    bottom: 10,
                    right: -20,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },

                calculable: true,
                series: [{
                    name: '半径模式',
                    type: 'pie',
                    radius: [60, 100],
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 5,
                        borderWidth: 45
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                let num = params.value.toFixed(2); 
                                return `${num}%` + '\n' + params.name
                            },
                            textStyle: {
                                fontSize: 16,
                                color: '#fff'
                            },
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 35
                        }
                    },
                    animationType: "scale",
                    animationEasing: "elasticOut",
                    animationDelay: function () {
                        return Math.random() * 200;
                    },
                    data: listData
                },]
            }
            option && myChart.setOption(option);
        }
    },
}
</script>
<style lang="less" scoped>
.area {
    width: 100%;
    padding: 0px 10px;

    .area-top {
        width: 460px;
        height: 41px;
        background: url(../../../assets/images/jiexiangchuishao/item-cillp.png) no-repeat;
        background-size: 100% 100%;
        margin-left: 50%;
        transform: translate(-50%);
        font-family: ShiShangZhongHeiJianTi;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        padding-left: 15px;
        line-height: 41px;
    }

    .area-main {
        width: 100%;
        height: 285px;
    }
}
</style>